﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <link href="~/layui_ext/dtree/dtree.css" rel="stylesheet" />
    <link href="~/layui_ext/dtree/font/dtreefont.css" rel="stylesheet" />
    <script src="~/layui/layui.js"></script>
</head>
<body>

    <input type="button" id="btn1" class="layui-btn" value="选中长沙市和株洲市" />
    <input type="button" id="btn2" class="layui-btn" value="得到所有选中值" />

    <ul id="demoTree" class="dtree" data-id="0"></ul>

    <script>

        layui.extend({
            dtree: '/layui_ext/dtree/dtree'   // {/}的意思即代表采用自有路径，即不跟随 base 路径
        }).use(['dtree', 'layer', 'jquery'], function () {
            var dtree = layui.dtree, layer = layui.layer, $ = layui.jquery;

            // 初始化树
            var DemoTree = dtree.render({
                elem: "#demoTree",
                method: "get",
                //data: demoTree, // 使用data加载
                url: "/json/case/asyncTree1Checkbox.json", // 使用url加载（可与data加载同时存在）
                dataFormat: "list",  //配置data的风格为list
                checkbar: true,
                checkbarType: "all", // 默认就是all，其他的值为： no-all  p-casc   self  only
                checkbarData: "choose" // 记录选中（默认）， "change"：记录变更， "all"：记录全部， "halfChoose"："记录选中和半选（V2.5.0新增）"
            });


            //初始化复选框的值
            $('#btn1').click(function () {
                var params = dtree.chooseDataInit("demoTree", "001001,001002,002002"); // 字符串形式
                //var params = dtree.chooseDataInit("demoTree", ["001", "002", "003"]); // 数组形式
                //var params = dtree.chooseDataInit("demoTree", 123); // 单个赋值可以不带字符串
                // 多级复选框
                //var params = dtree.chooseDataInit("demoTree", [["001001", "001002"], ["001003", "001004"]]);
            });

            //获取复选框的值
            $('#btn2').click(function () {
                var params = dtree.getCheckbarNodesParam("demoTree");
                console.log(params);
            });

        });



    </script>

</body>
</html>
